<template>
<div>
    <div class="ADissue">
        <Row class="select">
            <Col span=20 class="title">
                选择处理者
            </Col>
            <Col span=4>
                <Icon class="add" type="plus-round" size=16 color="#fff" @click.native="toLink('ADorganization')"></Icon>
            </Col>
        </Row>
        <Row class="pepole" v-for="item in this.$store.state.Administrator.tsPepole" :key="item.info.USER_ID">
            <Col span=2>
                <Icon class="tou" type="android-contact"></Icon>
            </Col>
            <Col span=10 class="text">
                 {{item.info.XM}} {{item.BMXX.DWMC}}
            </Col>
            <Col span=2 offset=8>
                <Icon class="delete" type="minus-round" @click.native="DETSPE(item.info.USER_ID)"></Icon>
            </Col>
        </Row>
        <Row class="btn-area">
            <Col span=22>
                <Button type="primary" size="large" long @click="issue">分发</Button>
            </Col>
        </Row>
    </div>
    <popups @close="complate" :show="show">
        <span slot="title" v-if="isIssueSucess">分发成功</span>
        <span slot="title" v-if="!isIssueSucess">分发失败</span>
        <div class="iss-st" v-if="isIssueSucess">
            <Icon class="gou" type="checkmark"></Icon>
            <div class="text">分发成功</div>
        </div>
        <div class="iss-st" v-if="!isIssueSucess">
            <Icon class="cha" type="alert"></Icon>
            <div class="text">{{ffsb}}</div>
        </div>
        <div slot="top-right"></div>
    </popups>
</div>
</template>

<script>
export default {
    props: ['EventList'],
    components: {
        popups: () => import('@/components/common/popups.vue')
    },
    data() {
        return {
            show: false,
            isIssueSucess: false,
            isIssue: false,
            ffsb: ''
        }
    },
    methods: {
        toLink(link) {
            this.$router.push({
                name: link
            })
        },
        // 分发任务
        issue() {
            if (!this.isIssue) {
                this.isIssue = true
                let tempArray = []
                // 获取发送的信息元组
                tempArray = this.$store.state.Administrator.tsPepole.map((item) => {
                    return {
                        evebt_id: this.EventList.EVENT_ID,
                        to_userID: item.info.USER_ID,
                        name: item.info.XM,
                        dwmc: item.BMXX.DWMC,
                        adminID: this.$store.state.userInfo.USER_ID
                    }
                })
                this.$store.dispatch('addHandout', tempArray).then((res) => {
                    if (res.data.status === 0) {
                        this.isIssueSucess = true
                    } else {
                        this.ffsb = res.data.msg
                    }
                    this.show = true
                    this.isIssue = false
                })
            }
        },
        // 关闭按钮
        close() {
            this.show = false
            if (this.isIssueSucess) {
                this.$router.push({
                    name: 'complate',
                    params: {
                        addIssue: true
                    }
                })
            }
        },
        // 确定按钮
        complate() {
            this.show = false
            if (this.isIssueSucess) {
                this.$router.push({
                    name: 'complate',
                    params: {
                        addIssue: true
                    }
                })
            }
        },
        DETSPE(USER_ID) {
            this.$store.commit('DELETE_tsPepoleChild', USER_ID)
        }
    }
}
</script>

<style lang="less">
    .iss-st{
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .gou{
            border-radius: 100%;
            padding: 8px 10px;
            font-size: 24px;
            background-color: rgba(0, 147, 221, 0.169);
            color: #0093dd;
        }
        .cha{
            border-radius: 100%;
            padding: 8px 18px;
            font-size: 24px;
            background-color: rgba(228, 56, 53, 0.169);
            color: rgb(228, 56, 53);
        }
        .text{
            margin-top: 10px;
            color: #999;
        }
    }
    .ADissue{
        padding-left: 20px;
        background-color: #fff;
        .select{
            padding: 10px 0;
            border-bottom: 1px solid #eaeaea;
            .title{
                font-size: 14px;
                font-weight: bold;
            }
            .add{
                display: inline-block;
                padding: 3px 5px;
                border-radius: 3px;
                background-color: #0093dd
            }
        }
        .pepole{
            padding: 10px 0;
            .tou{
                background-color: #0093dd;
                border-radius: 100%;
                color: #fff;
                font-size: 16px;
                padding: 4px 6px;
            }
            .text{
                color: #0093dd;
                font-size: 14px;
                line-height: 24px;
            }
            .delete{
                background-color: #fff;
                border: 2px solid red;
                border-radius: 100%;
                color: red;
                font-size: 14px;
                padding: 2px 4px; 
            }
        }
        .btn-area{
            padding: 20px 0;
        }
    }
</style>
